<template>
  <div class="detail-drawer" v-if="visible">
    <div class="drawer-header">
      <span>供应商对账明细详情</span>
      <button class="close" @click="$emit('close')">×</button>
    </div>
    <div class="drawer-body" v-if="loading">
      <div class="loading">正在加载详情...</div>
    </div>
    <div class="drawer-body" v-else-if="detail">
      <div class="detail-section">
        <h3>基本信息</h3>
        <div class="detail-grid">
          <div class="detail-item">
            <label>明细ID</label>
            <span>{{ detail.id }}</span>
          </div>
          <div class="detail-item">
            <label>对账单号</label>
            <span>{{ detail.reconciliationNo }}</span>
          </div>
          <div class="detail-item">
            <label>供应商</label>
            <span>{{ detail.supplierName || '-' }}</span>
          </div>
        </div>
      </div>

      <div class="detail-section">
        <h3>采购订单信息</h3>
        <div class="detail-grid">
          <div class="detail-item">
            <label>采购订单号</label>
            <span>{{ detail.purchaseOrderNo || '-' }}</span>
          </div>
          <div class="detail-item">
            <label>采购金额</label>
            <span>{{ toMoney(detail.purchaseAmount) }}</span>
          </div>
          <div class="detail-item">
            <label>采购数量</label>
            <span>{{ detail.purchaseQuantity || '-' }}</span>
          </div>
          <div class="detail-item">
            <label>预期入库时间</label>
            <span>{{ formatDate(detail.expectedStorageTime) }}</span>
          </div>
        </div>
      </div>

      <div class="detail-section">
        <h3>付款单信息</h3>
        <div class="detail-grid">
          <div class="detail-item">
            <label>付款单号</label>
            <span>{{ detail.paymentOrderNo || '-' }}</span>
          </div>
          <div class="detail-item">
            <label>应付金额</label>
            <span>{{ toMoney(detail.payableAmount) }}</span>
          </div>
          <div class="detail-item">
            <label>已核销金额</label>
            <span>{{ toMoney(detail.writtenOffAmount) }}</span>
          </div>
          <div class="detail-item">
            <label>付款日期</label>
            <span>{{ formatDate(detail.paymentDate) }}</span>
          </div>
        </div>
      </div>

      <div class="detail-section">
        <h3>收货单信息</h3>
        <div class="detail-grid">
          <div class="detail-item">
            <label>收货单号</label>
            <span>{{ detail.receiptNo || '-' }}</span>
          </div>
          <div class="detail-item">
            <label>收货时间</label>
            <span>{{ formatDate(detail.receiptTime) }}</span>
          </div>
          <div class="detail-item">
            <label>产品数量</label>
            <span>{{ detail.productCount || '-' }}</span>
          </div>
        </div>
      </div>

      <div class="detail-section">
        <h3>产品信息</h3>
        <div class="detail-grid">
          <div class="detail-item">
            <label>产品名称</label>
            <span>{{ detail.productName || '-' }}</span>
          </div>
          <div class="detail-item">
            <label>产品编码</label>
            <span>{{ detail.productCode || '-' }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="drawer-body" v-else>
      <div class="no-data">暂无数据</div>
    </div>
    <div class="drawer-footer">
      <button class="btn" @click="$emit('close')">关闭</button>
    </div>
  </div>
  <div class="mask" v-if="visible" @click="$emit('close')" />
</template>

<script>
import { supplierDetailInfo } from '@/api/finance/supplierReconciliationDetail'

export default {
  name: 'SupplierReconciliationDetailView',
  props: { 
    visible: Boolean,
    detailId: Number
  },
  data() {
    return {
      detail: null,
      loading: false
    }
  },
  watch: {
    visible(newVal) {
      if (newVal && this.detailId) {
        this.loadDetail()
      }
    },
    detailId(newVal) {
      if (newVal && this.visible) {
        this.loadDetail()
      }
    }
  },
  methods: {
    async loadDetail() {
      if (!this.detailId) return
      
      this.loading = true
      try {
        console.log('开始获取详情，ID:', this.detailId)
        const result = await supplierDetailInfo(this.detailId)
        console.log('API响应结果:', result)
        
        // 检查响应结构
        if (result && result.data) {
          const responseData = result.data
          console.log('响应数据结构:', responseData)
          
          // 检查响应码
          if (responseData.code === 200) {
            // 成功响应，使用data字段
            this.detail = responseData.data
            console.log('获取详情成功:', this.detail)
          } else {
            console.error('获取详情失败，响应码:', responseData.code, '消息:', responseData.msg)
          }
        } else {
          console.error('获取详情失败，响应结构异常:', result)
        }
      } catch (error) {
        console.error('获取详情失败:', error)
      } finally {
        this.loading = false
      }
    },
    toMoney(v) {
      if (v === null || v === undefined) return '-'
      const num = Number(v)
      if (Number.isNaN(num)) return '-'
      return num.toFixed(2)
    },
    formatDate(date) {
      if (!date) return '-'
      return new Date(date).toLocaleDateString()
    }
  }
}
</script>

<style scoped>
.detail-drawer { 
  position: fixed; 
  top: 0; 
  right: 0; 
  width: 600px; 
  height: 100%; 
  background: #fff; 
  box-shadow: -2px 0 8px rgba(0,0,0,.1); 
  display: flex; 
  flex-direction: column; 
  z-index: 1000; 
}
.drawer-header { 
  padding: 16px 20px; 
  border-bottom: 1px solid #eee; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  font-weight: bold;
  font-size: 16px;
}
.drawer-body { 
  padding: 20px; 
  flex: 1; 
  overflow: auto; 
}
.drawer-footer { 
  padding: 16px 20px; 
  border-top: 1px solid #eee; 
  text-align: right; 
}
.detail-section {
  margin-bottom: 24px;
}
.detail-section h3 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.detail-item label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}
.detail-item span {
  font-size: 14px;
  color: #333;
  padding: 6px 8px;
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #e9ecef;
}
.btn { 
  padding: 8px 16px; 
  border: 1px solid #dcdfe6; 
  background: #fff; 
  cursor: pointer; 
  border-radius: 4px; 
  font-size: 14px;
}
.btn:hover {
  background: #f5f7fa;
}
.close { 
  border: none; 
  background: transparent; 
  cursor: pointer; 
  font-size: 20px; 
  color: #666;
  padding: 4px;
}
.close:hover {
  color: #333;
}
.mask { 
  position: fixed; 
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  background: rgba(0,0,0,.3); 
  z-index: 999;
}
.loading, .no-data {
  text-align: center;
  padding: 40px;
  color: #666;
  font-size: 14px;
}
</style>
